<template>
	<picker :value="value" mode="selector" :range="range" range-key="name" @change="change">
		<fui-form-item label="是否加急" arrow highlight>
			<view v-if="value === undefined" class="fs-color__label">请选择是否加急</view>
			<view v-else>{{ label }}</view>
		</fui-form-item>
	</picker>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue';

	const is_urgent = defineModel('is_urgent');

	const range = ref([
		{ name: '需要加急', id: 1 },
		{ name: '无需加急', id: 0 }
	]);
	const value = ref();

	const change = (e) => {
		value.value = e.detail.value;
	};

	const label = ref('');
	watch(
		value,
		(val) => {
			if (val !== undefined) {
				label.value = range.value[val].name;
				is_urgent.value = range.value[val].id;
			}
		}, { immediate: true }
	);

	onMounted(async () => {
		if (!(is_urgent.value === '' || is_urgent.value === null)) {
			const index = range.value.findIndex((em) => String(em.id) === String(is_urgent.value));
			if (index !== -1) {
				value.value = index;
			}
		}
	})
</script>

<style></style>